<script setup lang="ts">
    import {RouterLink,RouterView} from 'vue-router'
    import {reactive} from 'vue'
    //模拟数据
    let datas = reactive([
        {id:1001,title:'娱乐新闻',content:'蔡琪塌方了'},
        {id:1002,title:'体育新闻',content:'吴破记录了~'},
        {id:1003,title:'教育新闻',content:'田塌方了~'},
        {id:1004,title:'国际新闻',content:'打仗了~'}
    ])
</script>
<template>
    <div class="news">
        <!-- {{ datas }} -->
        <!-- 导航区 -->
        <div class="left">
            <ul>
                <li v-for="n in datas">
                    <!-- 跳转并携带query参数（to的字符串写法) -->
                    <!-- <router-link :to="`/news/detail?id=${n.id}&title=${n.title}&content=${n.content}`">{{n.title}}</router-link> -->

                    <!-- 跳转并携带query参数（to的对象写法) -->
                    <!-- <router-link :to="{
                        //name或者path都是可以使用的
                        path:'/news/detail',
                        query:{
                            id:n.id,
                            title:n.title,
                            content:n.content
                        }
                    }">{{ n.title }}</router-link> -->
                   
                    <!-- <router-link :to="{name:'detail'}">{{ n.title }}</router-link> -->

                    <RouterLink :to="{
                        name:'detail',
                        params:{
                            id:n.id,
                            title:n.title,
                            content:n.content
                        }
                    }">{{ n.title }}</RouterLink>
                </li>
            </ul>
        </div>
        <!-- 展示区 Detail组件是路由组件,嵌套在News组件内的-->
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
</template>
<style scoped>
    .left{
        flex:1
    }

    .right{
        flex:1
    }

    .news{
        display:flex;
        width:80%;
        margin-top:20px;
        border:1px solid green;
        border-radius:5px;
        height:500px

    }
</style>